
<title>Puzzle Admin-用户管理</title>

<div class="page-header">
    <h4>
        <i class="glyphicon glyphicon-signal"></i>
        用户管理
    </h4>
</div>

<div class="row" id="">
    <div class="col-xs-12">
        <div id="user-gridview" class="gridview">
            <div class="grid-filter">
                <input type="text input-sm" style="height: 29px" class="txt" name="userName" placeholder="用户名" />
                <select name="roleId" style="height: 29px;width: 160px;">
                    <option value="0">请选择角色</option>
                    {{foreach from=$roleList item=roleItem}}
                        <option value="{{$roleItem.roleId}}">{{$roleItem.roleName}}</option>
                    {{/foreach}}
                </select>
                <select name="groupId" style="height: 29px;width: 160px;">
                    <option value="0">请选择用户组</option>
                    {{foreach from=$userGroupList item=userGroupItem}}
                        <option value="{{$userGroupItem.groupId}}">{{$userGroupItem.groupName}}</option>
                    {{/foreach}}
                </select>
                <select name="deptId" style="height: 29px;width: 160px;">
                    <option value="0">请选择部门</option>
                    {{foreach from=$deptList item=deptItem}}
                        <option value="{{$deptItem.deptId}}">{{$deptItem.deptName}}</option>
                    {{/foreach}}
                </select>
                <a class="btn btn-xs btn-action btn-purple" data-action="search" style="margin-top: -2px;margin-left: 10px;"><i class="ace-icon fa fa-search"></i>搜索</a>
            </div>

            {{include file="/inc/module_action.html"}}

            <div class="grid-table">
                <table class="table table-striped table-bordered table-hover table-list table-tree">
                    <thead>
                    <tr>
                        <th width="50">
                            <label class="position-relative">
                                <input type="checkbox" class="ace grid-cb-all" />
                                <span class="lbl"></span>
                            </label>
                        </th>
                        <th width="100">编号</th>
                        <th>登录名</th>
                        <th>用户名</th>
                        <th>性别</th>
                        <th>职位</th>
                        <th>所属角色</th>
                        <th>所属用户组</th>
                        <th>所属部门</th>
                        <th>用户状态</th>
                        <th>排序号</th>
                        <th width="120">操作</th>
                    </tr>
                    </thead>

                    <tbody>
                    <tr>
                        <td colspan="12">
                            <div class='loading'><i class='ace-icon fa fa-spinner bigger-200 orange'></i><span class="text">正在加载</span></div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="pagination-box">

                </div>
            </div>

            <div class="grid-form save-form">
                <div class="overlay"></div>
                <div class="widget-box widget-color-blue light-border ui-sortable-handle" style="width:600px;">
                    <div class="widget-header">
                        <h5 class="widget-title smaller"></h5>

                        <div class="widget-toolbar">
                            <a href="#" class="btn-action" data-action="hide">
                                <i class="ace-icon fa fa-close white"></i>
                            </a>
                        </div>
                    </div>

                    <div class="widget-body">
                        <div class="widget-main">
                            <div class="alert-info red"></div>
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        登录名
                                    </label>

                                    <div class="col-sm-9">
                                        <input type="text" id="loginName" name="loginName" placeholder="登录名" class="txt input-sm col-sm-5 ">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                    用户名
                                    </label>

                                    <div class="col-sm-9">
                                        <input type="text" id="userName" name="userName" placeholder="用户名" class="txt input-sm col-sm-8">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        密码
                                    </label>

                                    <div class="col-sm-9">
                                        <input type="password" id="password" name="password" placeholder="密码" class="txt input-sm col-sm-8">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        性别
                                    </label>
                                    <div class="col-sm-9">
                                        <div class="position-relative">
                                            <input type="radio" data-init="1" value="1" offval="2" name="sex" class="ace" checked>
                                            <label class="lbl">男</label>
                                            &nbsp;&nbsp;
                                            <input type="radio" data-init="1" value="2" offval="1" name="sex" class="ace">
                                            <label class="lbl">女</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        是否有效
                                    </label>
                                    <div class="col-sm-9">
                                        <input type="checkbox" data-init="1" value="1" offval="0" name="status" role="checkbox" class="editable ace ace-switch ace-switch-5">
                                        <span class="lbl" style="top:6px;"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        角色
                                    </label>
                                    <div class="col-sm-9">
                                        <select multiple="" data-init="0" id="roleId" name="roleId" class="select2 tag-input-style" data-placeholder="请选择角色">
                                            {{foreach from=$roleList item=roleItem}}
                                            <option value="{{$roleItem.roleId}}">{{$roleItem.roleName}}</option>
                                            {{/foreach}}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        用户组
                                    </label>
                                    <div class="col-sm-9">
                                        <select multiple="" data-init="0" name="groupId" id="groupId" class="select2 tag-input-style" placeholder="请选择用户组">
                                            {{foreach from=$userGroupList item=userGroupItem}}
                                            <option value="{{$userGroupItem.groupId}}">{{$userGroupItem.groupName}}</option>
                                            {{/foreach}}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        部门
                                    </label>
                                    <div class="col-sm-9">
                                        <select multiple="" data-init="0" name="deptId" id="deptId" class="select2 tag-input-style" placeholder="请选择部门">
                                            {{foreach from=$deptList item=deptItem}}
                                            <option value="{{$deptItem.deptId}}">{{$deptItem.deptName}}</option>
                                            {{/foreach}}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        职位
                                    </label>

                                    <div class="col-sm-9">
                                        <input type="text" id="title" name="title" placeholder="职位" class="txt input-sm col-sm-8">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        排序号
                                    </label>

                                    <div class="col-sm-9">
                                        <input type="text" data-init="0" id="sortOrder"  name="sortOrder" placeholder="排序号" class="txt input-sm col-sm-2">
                                    </div>
                                </div>
                                <div class="clearfix form-actions">
                                    <input type="hidden" name="userId" value="" />
                                    <a class="btn btn-sm btn-action" data-action="reset">
                                        <i class="ace-icon fa fa-undo"></i>
                                        重置
                                    </a>
                                    &nbsp; &nbsp; &nbsp;
                                    <a class="btn btn-sm btn-primary btn-action" data-action="save">
                                        <i class="ace-icon fa fa-check"></i>
                                        提交
                                    </a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-form search-form "></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('.page-content-area').ace_ajax('loadScripts', [null, null], function() {
        $('.select2').css('width','160px').select2({allowClear:true})
        $('#select2-multiple-style .btn').on('click', function(e){
            var target = $(this).find('input[type=radio]');
            var which = parseInt(target.val());
            if(which == 2) $('.select2').addClass('tag-input-style');
            else $('.select2').removeClass('tag-input-style');
        });

        $(document).one('ajaxloadstart.page', function(e) {
            $('[class*=select2]').remove();
        });


        $("#user-gridview").gridview({
            url: "systemuser/list.do",
            form:{
                url: "systemuser/action.do",
                check:function(){
                    var loginName=$("#loginName").val();
                    var userName=$("#userName").val();
                    var password=$("#password").val();
                    var title=$("#title").val();
                    var sortOrder=$("#sortOrder").val();
                    if(!loginName){
                        console.log("check form");
                        $("#loginName").focus();
                        return "请输入登录名";
                    }
                    else if(loginName.length<6 || loginName.length>20){
                        console.log("check form");
                        $("#loginName").focus();
                        return "登录名长度必须在6-20位之间";
                    }
                    else if(!userName){
                        console.log("check form");
                        $("#userName").focus();
                        return "请输入用户名";
                    }
                    else if(userName.length<6 || userName.length>20){
                        console.log("check form");
                        $("#userName").focus();
                        return "用户名长度必须在6-20位之间";
                    }
                    else if(!password){
                        console.log("check form");
                        $("#password").focus();
                        return "请输入密码";
                    }
                    else if(password.length<6 || password.length>20){
                        console.log("check form");
                        $("#password").focus();
                        return "密码长度必须在6-20位之间";
                    }
                    else if(!title){
                        console.log("check form");
                        $("#title").focus();
                        return "请输入职位";
                    }
                    else if(sortOrder<0 || isNaN(sortOrder)){
                        console.log("check form");
                        $("#sortOrder").focus();
                        return "排序号必须大于等于0且必须为数字";
                    }
                    else{
                        return true;
                    }
                }
            },
            jsonReader:{
                key_field: 'userId'
            },
            columns:[{
                name:"checkbox"
            },{
                name:"userId"
            },{
                name:"loginName"
            },{
                name:"userName"
            },{
                name:"sex",
                value: "sexName"
            },{
                name:"title"
            },{
                name:"roleName"
            },{
                name:"groupName"
            },{
                name:"deptName"
            },{
                name: "status",
                format: function(opts, column, row){
                    var text = ["<span class='label label-sm label-warning'>无效</span>", "<span class='label label-sm label-success'>有效</span>"];
                    return "<td>" + text[row[column.name]] + "</td>";
                }
            },{
                name: "sortOrder",
                format: function(opts, column, row){
                    return "<td><span class='label label-sm label-info arrowed arrowed-righ'>" + row[column.name] + "</span></td>";
                }
            },{
                name:"actions",
                list:["edit", "delete", "view"]
            }]
        });
    });
</script>